<template>
    <div>
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
                <van-swipe-item @click="swiper(item)" v-for="(item,index) in list" :key="index">
                <img class="banner_image" :src="item.banner_img" alt />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div>
            <Kinds />
        </div>
            <Cart :data="item" v-for="(item,index) in cartlist" :key="index"></Cart>
       
    </div>
</template>

<script>
    import { banner,cartList  } from "../request/http";
    import { Swipe, SwipeItem } from "vant";
    import Kinds from "../components/home/kinds";
    import Cart from "../components/home/Card";
   
    export default {
        name:"Index",
        data(){
            return {
                list:[],
                cartlist: [],
                
            }
        },
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            Kinds,
            Cart,
        },
        mounted(){
            document.body.style.background = "#f2f3f5"
            this.getBanner();
            cartList().then(res=>{
                console.log(res)
                this.cartlist = res;
                
            })
        },
        methods:{
            getBanner(){
              
               banner().then(res=>{
                   console.log(res);
                   this.list = res
               })
               
                //   fetch("/api/banner").then(res=>{
                //       console.log(res);
                //       this.list = res
                //   })
            },
             swiper(e) {
                // console.log(e);
                this.$router.push({
                    path: "/coursedet",
                    query: {
                        id: e.link_content
                    }
                });
                // this.$router.push({
                //    name:'coursedet',//命名路由
                //    params:{
                //        id: e.link_content
                //    }
                // });
            },
        }   
           
    }
</script>

<style lang="scss" scoped>
// 占位
.swiper {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 30%;
}
.banner_image {
  width: 100%;
}
</style>